<!DOCTYPE html>
<!-- 通过 xmlns:th=”http://www.thymeleaf.org“ 命令空间，将静态页面转换为动态的视图，
需要进行动态处理的元素,将使用“th:”前缀。 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>个人中心</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="webjars/bootstrap/3.4.1/css/bootstrap.css">
    <script src="webjars/jquery/3.6.0/jquery.js"></script>
    <script src="webjars/bootstrap/3.4.1/js/bootstrap.js"></script>

    <link rel="stylesheet" href="css/userInfo.css">
    <script src="js/userInfo.js"></script>

</head>

<body>
<div class="container">

    <!--个人中心导航  Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#my" aria-controls="home" role="tab"
                                                  data-toggle="tab">我的信息</a></li>
        <li role="presentation"><a href="#info" aria-controls="profile" role="tab" data-toggle="tab">完善资料</a>
        </li>
        <li role="presentation"><a href="#pwd" aria-controls="messages" role="tab" data-toggle="tab">修改密码</a>
        </li>
        <li role="presentation"><a href="#photo" aria-controls="settings" role="tab" data-toggle="tab">修改头像</a>
        </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <!-- 我的信息 -->
        <div role="tabpanel" class="tab-pane active" id="my">
            <table>
                <tr>
                    <th>用户ID:</th>
                    <td id="userid"> [[ ${usernowInfo.userId } ]] </td>
                </tr>
                <tr>
                    <th>用户名:</th>
                    <td> [[ ${usernowInfo.userName } ]] </td>
                </tr>
                <tr>
                    <th>注册时间:</th>
                    <td> [[ ${usernowInfo.registerTime } ]] </td>
                </tr>
                <tr>
                    <th>会员等级:</th>
                    <td> [[ ${usernowInfo.grade } ]] </td>
                </tr>
                <tr>
                    <th>剩余积分:</th>
                    <td> [[ ${usernowInfo.userCode } ]] </td>
                </tr>
                <tr>
                    <th>账户余额:</th>
                    <td> [[ ${usernowInfo.userMoney } ]] </td>
                </tr>
            </table>
        </div>
        <!-- 完善资料 -->
        <div role="tabpanel" class="tab-pane" id="info">


            <table>
                <tr>
                    <th>用户名:</th>
                    <td> [[ ${usernowInfo.userName } ]] </td>
                </tr>
                <tr>
                    <th>性别:</th>
                    <td>
                        <select class="form-control" id="usersex">
                            <option value="">--请选择--</option>
                            <option value="保密">保密</option>
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th>联系QQ:</th>
                    <td>
                        <input type="text" class="form-control" id="qqcontact" th:value="${usernowInfo.qq }">
                    </td>
                </tr>
                <tr>
                    <th>联系电话:</th>
                    <td>
                        <input type="text" class="form-control" id="phonecontact" th:value="${usernowInfo.phone } ">
                    </td>
                </tr>
                <tr>
                    <th>个性签名:</th>
                    <td>

                        <textarea class="form-control" id="selfsign" rows="3"> [[ ${usernowInfo.selfInfo } ]] </textarea>
                    </td>
                </tr>
                <tr>
                    <th></th>
                    <td>
                        <button type="button" class="btn btn-success btn-lg save-btn">保存信息</button>
                    </td>
                </tr>
            </table>

        </div>
        <!-- 修改密码 -->
        <div role="tabpanel" class="tab-pane" id="pwd">


            <table>
                <tr>
                    <th>用户名:</th>
                    <td id="pwdUsername"> [[ ${usernowInfo.userName } ]] </td>
                </tr>
                <tr>
                    <th>原密码:</th>
                    <td>
                        <input type="password" class="form-control" id="oldpwd">
                        <span id="oldtip" style="color: red;"></span>
                    </td>
                </tr>
                <tr>
                    <th>新密码:</th>
                    <td>
                        <input type="password" class="form-control" id="newpwd">
                    </td>
                </tr>
                <tr>
                    <th>确认新密码:</th>
                    <td>
                        <input type="password" class="form-control" id="surenewpwd">
                        <span id="suretip" style="color: red;"></span>
                    </td>
                </tr>
                <tr>
                    <th>邮箱:</th>
                    <td>
                        <input type="email" class="form-control" id="email" th:value="${usernowInfo.email }">
                    </td>
                </tr>
                <tr>
                    <th>

                    </th>
                    <td>
                        <button type="button" class="btn btn-success btn-lg save-btn2">保存信息</button>
                    </td>
                </tr>
            </table>


        </div>
        <!-- 修改头像 -->
        <div role="tabpanel" class="tab-pane" id="photo">

            <table>
                <tr>
                    <th>头像:</th>
                    <td>
                        <img th:if="${usernowInfo.photo !=null  && usernowInfo.photo !=''}" th:src="${usernowInfo.photo }" width="250px" height="300px">
                    </td>
                </tr>
                <tr>
                    <th>上传头像:</th>
                    <td>
                        <input type="file" id="upload">
                    </td>
                </tr>

                <tr>
                    <th>

                    </th>
                    <td>
                        <button type="button" class="btn btn-success btn-lg save-btn3">保存信息</button>
                    </td>
                </tr>
            </table>

        </div>
    </div>
</div>


<!-- 模态框 -->
<div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">提示</h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default user-btn" data-dismiss="modal">确认</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>



